<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?=$product['title']?></title>
    <link href="<?=$path?>static/css/style.css" rel="stylesheet">
    <link href="<?=$path?>static/css/swiper.css" rel="stylesheet">
    <style type="text/css">
    body{background: #fff}
		.pro-container{width:100%;max-width: 720px;min-width: 320px;margin:0 auto;box-sizing: border-box;}
		.buy-selecte-header{top:0;height:110px;background:#fcfcfc;padding: 5px;position:fixed;left:0;right:0;}
    .buy-selecte-content{background-color: #fff;padding:110px 5px 60px 5px;}
    #product_thum{width:100px;height:100px;background-color:#eee;float: left;margin-right: 10px;background-size:contain;}
    #product_title{height: 40px;overflow: hidden;width:calc(100% - 110px);display: table;float: left}
    #product_title p{display: table-cell;vertical-align: middle;font-size: 14px;line-height: 20px}
    #total_price{color:red;font-size: 20px;width:calc(100% - 110px);height:40px;line-height: 40px;float: left;margin:0;}
    #header_pro_tip{color:#333;font-size:12px;width:calc(100% - 110px);height:20px;line-height: 20px;float: left;margin:0;}
    .buy-selecte-suit-name{margin-top: 10px;color:#555;font-size: 16px;border-top: 1px #eee solid;padding-top: 10px;}
    .buy-selecte-suit-name:first-child{margin-top:0px;border-top:none;}
    .buy-selecte-suit{list-style: none;padding: 0}
    .buy-selecte-suit li{padding: 8px 15px;float: left;margin: 5px; border-radius: 3px;font-size: 12px;min-width: 50px;max-width:300px;text-align: center;background: #ececec;}
    .buy-selecte-suit li.active{background: red;color:#fff;}
    .mui-numbox{margin-left: 5px;}
    .mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn]{
      background-color:#ececec;
    }
    #btn_buy{position: fixed;bottom:0;left:0;right:0;height:45px;font-size: 16px;color:#fff;background: red}
  }
	</style>
  </head>
  <body>
  <div class="pro-container buy-selecte-header" id="product_header">
    <div id="product_thum"></div>
    <div id="product_title"><p><?=$product['title']?></p></div>
    <p id="header_pro_tip">厂家直销，假一罚十</p>
    <h3 id="total_price"></h3>
  </div>
  <div class="pro-container buy-selecte-content">
  <?php foreach ($product['attr'] as $item):?>
    <p class="buy-selecte-suit-name"><?=$item['name']?></p>
    <ul class="mui-clearfix buy-selecte-suit">
    <?php foreach ($item['option'] as $option):?>
      <li data-price-add="<?=$option['price_add']?>"><?=$option['value']?></li>
    <?php endforeach;?>
    </ul>
  <?php endforeach;?>
    <p class="buy-selecte-suit-name"><?=$tran['count']?></p>
    <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='999'>
      <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
      <input class="mui-numbox-input" disabled id="product_number" type="number" />
      <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
    </div>
    <button type="button" id="btn_buy" class="pro-container mui-btn"><?=$tran['buy']?></button>
  </div>
  
    <script src="<?=$path?>static/js/jquery-3.2.1.min.js"></script>
    <script src="<?=$path?>static/js/mui.min.js"></script>
    <script type="text/javascript">
      $(function(){
        var thumbs = <?=$product['img_banners']?>;
        var currency = "<?=$product['currency']?>";
        var base_price = <?php echo $product['is_discount']?$product['discount_price']:$product['price'];?>;
        var myMessage = null;
        upPrice();
        $('#product_thum').css('background-image','url('+thumbs[0].path+')');
        mui(document.body).on('tap', '#btn_buy', function(e){
          if(myMessage){
            mui.alert(myMessage,'<?=$tran['tip']?>','<?=$tran['ok']?>',null,'div');
            return;
          }
          var count = $('#product_number').val();
          var price = $('#total_price').text();
          var attrs = '';
          $('.buy-selecte-suit').each(function(){
            attrs += $(this).children('li.active').index()+',';
          })
          location.href = '<?php echo site_url('pay/'.$product['uri']);?>?count='+count+'&attrs='+attrs.substr(0, attrs.length - 1)+'&price='+price;
        });
        

        mui(document.body).on('tap','#product_header',function(e){
          location.href = '<?php echo site_url($product['uri']);?>';
        });

        mui('.buy-selecte-suit').on('tap', 'li', function(e){
          $(this).addClass('active').siblings().removeClass('active');
          upPrice();
        });

        function upPrice(){
          myMessage = null;
          var price = parseInt(base_price);
          var price_add = [0,0];
          $('.buy-selecte-suit').each(function(){
            var data_price_add = [];
            $(this).children('li').each(function(){
              data_price_add.push($(this).data('price-add'))
            })
            var $active = $(this).children('li.active');
            if($active.length==1){
              var index = $active.index();
              price += data_price_add[index];
            }else{
              price_add[0] += Math.min.apply(null,data_price_add);
              price_add[1] += Math.max.apply(null,data_price_add);
              if(!myMessage) myMessage = '<?=$tran['select']?>'+$(this).prev().text();
            }
          })
          if(price_add[0]==price_add[1]){
            $('#total_price').text(currency+(price+price_add[0]));
          }else{
            $('#total_price').text(currency+(price+price_add[0])+'-'+currency+(price+price_add[1]));
          }
        }
      })    	
    </script>
    
  </body>
</html>